/**
 * 页面渲染使用
 */
import Vue from 'vue'
import { loadScriptQueue } from '@/utils/loadScript'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 显示页面获取
const $previewApp = document.getElementById('previewApp')

// 监听刷新展示页面
window.addEventListener('message', init, false)

/**
 * 显示页面初始化
 * @param {*} event 初始化使用参数
 */
function init(event) {
  console.log('测试init', event)
  if (event.data.type === 'refreshFrame') {
    const code = event.data.data
    // 引用连接
    let links = ''
    if (Array.isArray(code.links) && code.links.length > 0) {
      links = buildLinks(code.links)
    }
    $previewApp.innerHTML = `${links}<style>${code.css}</style><div id="app"></div>`
    // 判断是否引用js
    if (Array.isArray(code.scripts) && code.scripts.length > 0) {
      // 远程加载js
      loadScriptQueue(code.scripts, () => newVue(code.js, code.html))
    } else {
      newVue(code.js, code.html)
    }
  }
}

/**
 * 获取使用连接
 * @param {*} links 连接集合
 * @returns 页面拼接路径
 */
function buildLinks(links) {
  let strs = ''
  links.forEach(url => {
    strs += `<link href="${url}" rel="stylesheet">`
  })
  return strs
}

/**
 * 挂载vue对象
 * @param {*} main
 * @param {*} html
 */
function newVue(main, html) {
  main = eval(`(${main})`)
  main.template = `<div>${html}</div>`
  new Vue({
    components: {
      child: main
    },
    data() {
      return {}
    },
    template: `<div><child /></div>`
  }).$mount('#app')
}
